<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>账号信息</span>
        <!-- 头像开始 -->

        <div style="text-align: center">
          <div class="demo-basic--circle">
            <div class="block"><el-avatar :size="100" :src="userFace"></el-avatar></div>
          </div>
          <el-button type="primary" plain @click="toChange">修改头像</el-button>
        </div>
        <!-- 头像结束 -->
      </div>
      <!-- 用户信息展示开始 -->
      <div>
        <el-button style="float: right; padding: 3px 0" type="text">修改个人信息</el-button>
        <!-- {{ tableData }} -->
        <div>
          <el-descriptions class="margin-top" :column="1" border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                用户名
              </template>
              托马斯
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                联系方式
              </template>
              15512348116
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                生日
              </template>
              暂无
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                用户状态
              </template>
              <el-tag size="small">正常</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                邮箱
              </template>
              暂无
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <!-- 用户信息展示结束 -->
    </el-card>

    <!-- 头像模态框开始 -->
    <el-dialog :visible.sync="visible" width="500px">
      <el-form ref="myForm">
        <el-form-item label="编辑头像" prop="icon">
          <el-upload class="avatar-uploader" :action="uploadFileURL" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="form.icon" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="toSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 头像模态框结束 -->
  </div>
</template>

<script>
import { showFileURL, uploadFileURL } from '@/utils/config'
import { getInfo } from '@/api/user'
export default {
  // 组件名称
  name: '',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      token:"",
      userFace: '',
      size: '',
      tableData: [],
      imageUrl: '',
      showFileURL, //图片显示的基础路径
      uploadFileURL, //文件上传的路径
      circleUrl: '',
      visible: false //控制模态框显示与隐藏
    }
  },
  // 计算属性
  computed: {
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
      // 获取用户信息
      async getUserInfo(){
        let res=await getInfo();
        console.log(res);
        
      },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      console.log(res)
      this.form.icon = showFileURL + res.data.id //展示图片 图片基础路径+图片
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    // 提交头像
    toSubmit() {
      this.visible = false //隐藏模态框
    },
    toChange() {
      this.visible = true //显示模态框
      this.imageUrl = ''
    }
  },
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getUserInfo();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
